<template>
  <div>
     <div class="area">
			 <span class="typeTitle">区域</span>
			 <type :content="area" indexName="area" @changeType="changeType"></type>
     </div>
		 <div class="order">
			 <span class="typeTitle">排序</span>
			 <type :content="order" indexName="order" @changeType="changeType"></type>
		 </div>
		 <div class="content">
			 <mv v-for="i in 40" width="280px" height="160px" class="item"></mv>
		 </div>
		 <el-pagination class="pager" background layout="prev, pager, next, jumper" :total="1000"></el-pagination>
  </div>
</template>

<script>
	import type from '../../../components/tab/tab_atom.vue'
	import mv from '../../../components/swiperItem/mv.vue'
  export default{
    name:'',
    data(){
      return {
				area:['华语','欧美','日本','港台','拉丁','其他'],
				order:['最新','最热']
      }
    },
    methods:{
      changeType(i){
				console.log(i);
			}
    },
    components:{
       type,mv
    }
  }
</script>

<style scoped>
	.area,.order{
		display: flex;
		align-items: center;
	}
	.typeTitle{
		margin-right: 30px;
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 30px 0;
	}
	.item{
		margin-top: 20px;
	}
</style>
